// 1. 获取所有需要操作的DOM元素
const todoInput = document.getElementById('todoInput');
const addTodoBtn = document.getElementById('addTodoBtn');
const todoList = document.getElementById('todoList');
const todoCount = document.getElementById('todoCount');

// 2. 初始化：统计待办数量（初始为0）
updateTodoCount();

// 3. 添加待办事项
function addTodo() {
    // 获取输入内容并去除空格
    const todoText = todoInput.value.trim();
    if (!todoText) return; // 空内容不添加

    // 创建待办项<li>元素
    const todoItem = document.createElement('li');
    todoItem.className = 'todo-item';

    // 创建待办文本<span>（支持点击切换完成状态）
    const todoTextSpan = document.createElement('span');
    todoTextSpan.className = 'todo-text';
    todoTextSpan.textContent = todoText;
    todoTextSpan.addEventListener('click', toggleTodoComplete); // 绑定切换事件

    // 创建删除按钮<button>
    const deleteBtn = document.createElement('button');
    deleteBtn.className = 'delete-btn';
    deleteBtn.innerHTML = '<i class="fa fa-trash"></i> 删除';
    deleteBtn.addEventListener('click', deleteTodo); // 绑定删除事件

    // 组装待办项并添加到列表
    todoItem.appendChild(todoTextSpan);
    todoItem.appendChild(deleteBtn);
    todoList.appendChild(todoItem);

    // 清空输入框 + 更新数量统计
    todoInput.value = '';
    updateTodoCount();
}

// 4. 切换待办完成状态（添加/移除删除线样式）
function toggleTodoComplete(e) {
    const todoTextSpan = e.target;
    todoTextSpan.classList.toggle('completed');
    updateTodoCount(); // 状态变化后更新数量
}

// 5. 删除待办项
function deleteTodo(e) {
    const todoItem = e.target.closest('.todo-item'); // 找到最近的待办项父元素
    todoList.removeChild(todoItem);
    updateTodoCount(); // 删除后更新数量
}

// 6. 更新待办数量统计（统计未完成的待办项）
function updateTodoCount() {
    const totalTodos = document.querySelectorAll('.todo-item').length;
    const completedTodos = document.querySelectorAll('.todo-text.completed').length;
    const uncompletedTodos = totalTodos - completedTodos;
    todoCount.textContent = `当前待办数量：${uncompletedTodos}`;
}

// 7. 绑定事件：点击添加按钮 / 按Enter键添加
addTodoBtn.addEventListener('click', addTodo);
todoInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') addTodo(); // 按下Enter键触发添加
});